<template>
  <view class="announcement-list">


    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="filter-tabs">
        <view 
          v-for="(tab, index) in filterTabs" 
          :key="index"
          class="filter-tab"
          :class="{ active: currentTab === tab.value }"
          @click="switchTab(tab.value)"
        >
          {{ tab.label }}
        </view>
      </view>
    </view>

    <!-- 公告列表 -->
    <view class="list-container">
      <!-- 加载状态 -->
      <view v-if="loading && announcements.length === 0" class="loading-container">
        <u-loading-icon mode="spinner" size="60"></u-loading-icon>
        <text class="loading-text">加载中...</text>
      </view>

      <!-- 公告项 -->
      <view v-else-if="announcements.length > 0" class="announcement-items">
        <view 
          v-for="(item, index) in announcements" 
          :key="item.id"
          class="announcement-item"
          @click="viewDetail(item)"
        >
          <!-- 未读标识 -->
          <view v-if="!item.is_read" class="unread-dot"></view>
          
          <!-- 公告类型标签 -->
          <view v-if="item.type" class="type-tag" :class="item.type_class">
            {{ item.type_text || item.type_name }}
          </view>

          <!-- 公告内容 -->
          <view class="item-content">
            <view class="item-title">{{ item.title }}</view>
            <view class="item-summary">{{ getContentSummary(item.content) }}</view>
            <view class="item-meta">
              <view class="meta-left">
                <text class="meta-time">{{ formatTime(item.publish_time) }}</text>
                <text v-if="item.view_count" class="meta-views">{{ item.view_count }}次浏览</text>
              </view>
              <view class="meta-right">
                <u-icon name="arrow-right" size="24" color="#ccc"></u-icon>
              </view>
            </view>
          </view>

          <!-- 公告图片 -->
          <view v-if="item.image_url" class="item-image">
            <image :src="item.image_url" mode="aspectFill" class="thumbnail"></image>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else class="empty-state">
        <u-icon name="info-circle" size="120" color="#ccc"></u-icon>
        <text class="empty-text">暂无公告</text>
        <view class="empty-btn" @click="refreshList">
          <text class="empty-btn-text">刷新试试</text>
        </view>
      </view>

      <!-- 加载更多 -->
      <view v-if="announcements.length > 0" class="load-more">
        <view v-if="loadingMore" class="loading-more">
          <u-loading-icon mode="spinner" size="40"></u-loading-icon>
          <text class="loading-more-text">加载中...</text>
        </view>
        <view v-else-if="hasMore" class="load-more-btn" @click="loadMore">
          <text class="load-more-text">加载更多</text>
        </view>
        <view v-else class="no-more">
          <text class="no-more-text">没有更多了</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 公告列表页
 * @author 王勇程 <laughskydragon@qq.com>
 */
import { announcementApi } from '@/api'

export default {
  data() {
    return {
      loading: false,
      loadingMore: false,
      hasMore: true,
      currentPage: 1,
      pageSize: 10,
      announcements: [],
      currentTab: 'all',
      filterTabs: [
        { label: '全部', value: 'all' },
        { label: '系统公告', value: '1' },
        { label: '活动公告', value: '2' },
        { label: '维护公告', value: '3' }
      ]
    }
  },

  onLoad() {
    this.loadAnnouncementList()
  },

  onShow() {
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: '系统公告'
    })
  },

  onReachBottom() {
    if (this.hasMore && !this.loadingMore) {
      this.loadMore()
    }
  },

  onPullDownRefresh() {
    this.refreshList()
  },

  methods: {
    // 加载公告列表
    async loadAnnouncementList(isRefresh = false) {
      try {
        if (isRefresh) {
          this.currentPage = 1
          this.hasMore = true
        }
        
        this.loading = isRefresh || this.currentPage === 1
        
        const params = {
          page: this.currentPage,
          limit: this.pageSize
        }
        
        // 添加类型筛选
        if (this.currentTab !== 'all') {
          params.type = this.currentTab
        }
        
        const res = await announcementApi.getAnnouncementList(params)
        
        if (res.code === 0) {
          let newData = res.data.data || []
          newData = newData.map(item => {
            const key = String(item.type || '')
            const nameMap = {
              system: '系统公告',
              common: '普通公告',
              notice: '通知公告',
              activity: '活动公告',
              maintenance: '维护公告',
              update: '更新公告',
              '1': '系统公告',
              '2': '活动公告',
              '3': '维护公告'
            }
            const classMap = {
              system: 'type-system',
              common: 'type-common',
              notice: 'type-notice',
              activity: 'type-activity',
              maintenance: 'type-maintenance',
              update: 'type-update',
              '1': 'type-system',
              '2': 'type-activity',
              '3': 'type-maintenance'
            }
            return {
              ...item,
              type_name: nameMap[key] || '公告',
              type_class: classMap[key] || 'type-default'
            }
          })
          
          if (isRefresh || this.currentPage === 1) {
            this.announcements = newData
          } else {
            this.announcements = [...this.announcements, ...newData]
          }
          
          // 判断是否还有更多数据
          this.hasMore = newData.length === this.pageSize
          
          if (isRefresh) {
            uni.stopPullDownRefresh()
            uni.showToast({
              title: '刷新成功',
              icon: 'success'
            })
          }
        } else {
          uni.showToast({
            title: res.msg || '加载失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载公告列表失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
        
        if (isRefresh) {
          uni.stopPullDownRefresh()
        }
      } finally {
        this.loading = false
        this.loadingMore = false
      }
    },

    // 切换筛选标签
    switchTab(tabValue) {
      if (this.currentTab !== tabValue) {
        this.currentTab = tabValue
        this.currentPage = 1
        this.announcements = []
        this.hasMore = true
        this.loadAnnouncementList()
      }
    },

    // 加载更多
    loadMore() {
      if (this.hasMore && !this.loadingMore) {
        this.loadingMore = true
        this.currentPage++
        this.loadAnnouncementList()
      }
    },

    // 刷新列表
    refreshList() {
      this.loadAnnouncementList(true)
    },

    // 查看详情
    viewDetail(announcement) {
      uni.navigateTo({
        url: `/pages/announcement/announcement?id=${announcement.id}`
      })
    },

    // 获取内容摘要
    getContentSummary(content) {
      if (!content) return ''
      // 移除HTML标签并截取前50个字符
      return content.replace(/<[^>]+>/g, '').substring(0, 50) + '...'
    },

    // 格式化时间
    formatTime(time) {
      if (!time) return ''
      const date = new Date(time)
      const now = new Date()
      const diff = now - date
      
      if (diff < 60000) { // 1分钟内
        return '刚刚'
      } else if (diff < 3600000) { // 1小时内
        return Math.floor(diff / 60000) + '分钟前'
      } else if (diff < 86400000) { // 1天内
        return Math.floor(diff / 3600000) + '小时前'
      } else if (diff < 604800000) { // 1周内
        return Math.floor(diff / 86400000) + '天前'
      } else {
        return date.toLocaleDateString()
      }
    },

    


  }
}
</script>

<style scoped>
.announcement-list {
  min-height: 100vh;
  background: #f5f5f5;
}



/* 筛选栏 */
.filter-bar {
  background: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.filter-tabs {
  display: flex;
  align-items: center;
}

.filter-tab {
  padding: 12rpx 24rpx;
  margin-right: 20rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666;
  background: #f5f5f5;
  transition: all 0.3s;
}

.filter-tab.active {
  color: #fff;
  background: #ff4444;
}

/* 列表容器 */
.list-container {
  padding: 20rpx 30rpx;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

/* 公告项 */
.announcement-items {
  margin-bottom: 40rpx;
}

.announcement-item {
  position: relative;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: flex-start;
}

.announcement-item:active {
  background: #f8f8f8;
}

/* 未读标识 */
.unread-dot {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #ff4444;
}

/* 类型标签 */
.type-tag {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  font-size: 20rpx;
  color: #fff;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  z-index: 1;
}

.type-system {
  background: #ff4444;
}

.type-activity {
  background: #ff8800;
}

.type-maintenance {
  background: #666;
}

.type-notice {
  background: #4a90e2;
}

.type-common {
  background: #7b8a8b;
}

.type-update {
  background: #2ecc71;
}

.type-default {
  background: #999;
}

/* 内容区域 */
.item-content {
  flex: 1;
  padding-top: 20rpx;
}

.item-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 12rpx;
}

.item-summary {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
  margin-bottom: 16rpx;
}

.item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.meta-left {
  display: flex;
  align-items: center;
}

.meta-time {
  font-size: 22rpx;
  color: #999;
  margin-right: 20rpx;
}

.meta-views {
  font-size: 22rpx;
  color: #999;
}

/* 缩略图 */
.item-image {
  width: 120rpx;
  height: 120rpx;
  margin-left: 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.thumbnail {
  width: 100%;
  height: 100%;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 60rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin: 40rpx 0;
}

.empty-btn {
  background: #ff4444;
  border-radius: 40rpx;
  padding: 20rpx 40rpx;
}

.empty-btn-text {
  font-size: 28rpx;
  color: #fff;
}

/* 加载更多 */
.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.loading-more {
  display: flex;
  align-items: center;
}

.loading-more-text {
  font-size: 26rpx;
  color: #999;
  margin-left: 12rpx;
}

.load-more-btn {
  background: #ff4444;
  border-radius: 40rpx;
  padding: 16rpx 32rpx;
}

.load-more-text {
  font-size: 26rpx;
  color: #fff;
}

.no-more {
  padding: 20rpx 0;
}

.no-more-text {
  font-size: 24rpx;
  color: #ccc;
}
</style>
